.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;

  .camera-container {
    width: 100%;
    margin-bottom: 20px;

    .camera-buttons {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;

      .btn {
        width: 45%;
        background-color: #07C160;
        color: white;

        &.cancel {
          background-color: #F56C6C;
        }
      }
    }
  }

  .register-btn-container {
    margin-bottom: 20rpx;
    text-align: center;

    .register-btn {
      width: 240rpx;
      height: 240rpx;
      border-radius: 50%;
      background: linear-gradient(145deg, #3b82f6, #60a5fa);
      color: white;
      font-size: 36rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10rpx 20rpx rgba(59, 130, 246, 0.3);

      &.registered {
        background: linear-gradient(145deg, #10b981, #34d399);
        box-shadow: 0 10rpx 20rpx rgba(16, 185, 129, 0.3);
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }

  .tips {
    margin-top: 20px;
    color: #666;
    font-size: 28rpx;
    text-align: center;
  }
}